<template>
	<div>
		<cl-crud @load="onLoad">
			<template #table-column-app="{scope}">
				<div>{{ filterplatForm(scope.row.app) }}</div>
			</template>
			<template #table-column-status="{scope}">
				<el-tag v-if="scope.row.status == 0">禁用</el-tag>
				<el-tag type="success" v-else-if="scope.row.status == 1">启用</el-tag>
			</template>
			<template #slot-copy="{scope}">
				<el-button type="text" @click="copyData(scope.row)">复制</el-button>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import _ from 'lodash';
export default {
	data() {
		return {};
	},

	mounted() {},
	computed: {
		...mapGetters(['platformList']),
		filterplatForm() {
			return function(val) {
				return this.platformList.length == 0
					? val
					: this.platformList.filter(v => v.value == val)[0].label;
			};
		}
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.msgList.wechatTemplate)
				.set('dict', {
					label: {
						add: '创建消息'
					}
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center'
						},
						{
							label: '模板消息ID',
							prop: 'template_id',
							align: 'center'
						},
						{
							label: '模板参数',
							prop: 'template_params',
							align: 'center'
						},
						{
							label: '小程序主页',
							prop: 'page',
							align: 'center'
						},
						{
							label: '推送小时',
							prop: 'hour',
							align: 'center'
						},
						{
							label: 'app',
							prop: 'app',
							align: 'center',
							minWidth: 150
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						}
					],

					op: {
						layout: ['slot-copy', 'edit', 'delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '120px',
						center: true,
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						{
							label: '数据平台',
							prop: 'app',
							component: {
								name: 'el-select',
								props: {
									placeholder: '请选择平台',
									filterable: true,
									'default-first-option': true
								},
								options: this.options
							},
							rules: {
								required: true,
								message: '数据平台'
							}
						},
						{
							label: '模板消息ID',
							prop: 'template_id',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入模板消息ID'
								}
							},
							rules: {
								required: true,
								message: '请输入模板消息ID'
							}
						},
						{
							label: '模板参数',
							prop: 'template_params',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入模板参数',
									type: 'textarea'
								}
							},
							rules: {
								required: true,
								message: '请输入模板参数'
							}
						},
						{
							label: '小程序主页',
							prop: 'page',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入小程序主页'
								}
							},
							rules: {
								required: true,
								message: '请输入小程序主页'
							}
						},
						{
							prop: 'hour',
							label: '推送小时',
							value: 1,
							component: {
								name: 'el-input-number',
								props: {
									min: 0,
									max: 23
								}
							}
						},
						{
							label: '状态',
							prop: 'status',
							value: 1,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '启用',
										value: 1
									},
									{
										label: '禁用',
										value: 0
									}
								]
							}
						}
					]
				})
				.on('open', async (isEdit, data) => {
					this.crud.setData(
						'upsert.items[prop:app].component.options',
						this.$store.state.topFilter.platList
					);
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('submit', (isEdit, data, { next }) => {
					console.log(data);
					next({
						app: data.app,
						...data
					});
				})
				.done();

			app.refresh();
		},
		copyData(item) {
			let d = _.cloneDeep(item);
			delete d.id;
			this.crud.append({
				...d
			});
		}
	}
};
</script>
<style lang="scss" scoped></style>
